<template>
  <Header :title="address"></Header>
  <van-address-edit
    :area-list="areaList"
    show-delete
    show-set-default
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    :address-info="addressinfo"
    @save="onSave"
    @delete="onDelete"
    @change-detail="onChangeDetail"
  />
</template>

<script setup>
import Header from "@/components/Header.vue";
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { showToast } from "vant";
const route = useRoute();
const router = useRouter();
const store = useStore();
console.log(route.query);
const areaList = ref({
  province_list: {
    110000: "广东省",
    120000: "浙江省",
  },
  city_list: {
    110100: "广州市",
    110200: "深圳市",
    120100: "杭州市",
    120200: "宁波市",
  },
  county_list: {
    110101: "天河区",
    110102: "海珠区",
    120102: "上城区",
    130102: "下城区",
  },
});
let addressinfo = ref({});
const address = computed(() => {
  return route.query.type === "add" ? "新增地址" : "编辑地址";
});
// 点击编辑的信息回显
const initInfo = () => {
  store.state.userAddress.forEach((item) => {
    if (item.id === Number(route.query.name)) {
      addressinfo.value = item;
    }
  });
};
const onSave = (content) => {
  // 判断是编辑还是新增
  if (route.query.type === "add") {
    store.commit("ADDADDRESS", content);
  } else {
    // 编辑
    store.commit("EDITADDRESS", content);
  }
  showToast("保存成功");
  setTimeout(() => {
    router.back();
  }, 1000);
};
const onDelete = (content) => {
  store.commit("DELADDRESS", content);
  showToast("删除成功");
  setTimeout(() => {
    router.back();
  }, 1000);
};
const onChangeDetail = () => {};
onMounted(() => {
  initInfo();
});
</script>

<style lang="less" scoped>
/deep/.van-button--primary {
  background: #ffc400;
  border: 1px solid #ffc400;
}
/deep/.van-switch--on {
  background: #ffc400;
}
</style>
